import React, { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Button, Card, Form, Input, message } from 'antd';
// 引入css样式
import style from '../index.module.css'
// 引入新增医院设置的相关请求
import { addHospitalRequest, getHosSetFromIdRequest, updateHosSetFromIdRequest } from '@/api/hospital/hospitalSet';
// 引入新增医院post参数的数据类型type
import type { addHospitalParamType, updateHospitalParamType } from '@/api/hospital/model/hospitalSetType';



const AddOrUpdateSet = () => {
    // 引用useNavigate
    const navigate = useNavigate()
    // 通过Form组件上的一个useForm方法,可以创建一个实例.然后在你需要的Form组件上添加一个form属性
    // 值就是当前的实例,那么Form表单就和当前form实例关联起来了
    const [form] = Form.useForm()

    // ###Params传值id
    // 通过useParams传值的形式,拿到id的值
    const { id } = useParams()
    // console.log(id,'idddddd');

    // 点击操作中的修改按钮,获取数据的逻辑
    useEffect(() => {
        if (id) {
            const getHosDetail = async () => {
                // 发送请求
                const result = await getHosSetFromIdRequest(id)
                // console.log(result);
                // Form实例上有一个setFieldsValue方法,可以将一个对象的值通过key和表单的name相对应的形式添加到表单中
                // 此时就完成了点击修改按钮之后,表单上默认出现点击的那条全部数据
                form.setFieldsValue(result)
            }
            getHosDetail()
        }
    })

    //新增医院的事件回调函数
    const addHosHandle = async (addHosDate: addHospitalParamType) => {
        if (id) {
            await updateHosSetFromIdRequest({ ...addHosDate, id })
            //修改成功以后返回医院设置页面
            navigate("/syt/hospital/hospitalset")
            // 修改成功后增加弹窗
            message.success("修改数据成功")
        } else {
            //发送新增医院数据的请求
            await addHospitalRequest(addHosDate)
            //新增成功以后返回医院设置页面
            navigate("/syt/hospital/hospitalset")
            // 新增成功后增加弹窗
            message.success("修改数据成功")
        }

    }

    //  点击返回按钮的事件函数
    const goBackHandle = () => {
        // 退后一步
        navigate(-1)
    }


    return (
        <Card>
            <Form
                name="basic"
                labelCol={{ span: 2, }}
                wrapperCol={{ span: 19 }}
                // 给表单绑定新增数据的事件函数
                onFinish={addHosHandle}
                // useForm方法创建出的实例,添加一个fprm属性,值就是这个实例form
                form={form}

            >
                <Form.Item
                    label="医院名称"
                    name="hosname"
                    rules={[{
                        required: true,
                        message: '请输入医院名称',
                        transform(value) { return value.trim() }
                    }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="医院编号"
                    name="hoscode"
                    rules={[{ required: true, message: '请输入医院编号' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="api基础路径"
                    name="apiUrl"
                    rules={[{ required: true, message: '请输入api基础路径' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="联系人姓名"
                    name="contactsName"
                    rules={[{ required: true, message: '请输入联系人姓名' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="联系人手机"
                    name="contactsPhone"
                    rules={[{ required: true, message: '请输入联系人手机' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 2,
                    }}
                >
                    <Button type="primary" htmlType="submit" >
                        提交
                    </Button>
                    <Button type="default" htmlType="button" className={style.mr} onClick={goBackHandle}>
                        返回
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    );
};

export default AddOrUpdateSet;